<template>
  <div class="map-wrapper">
      <div :id="cid" v-if="cid" class="map"></div>
  </div>
</template>

<script>
export default {
    props: {
        cid: {
            type: String,
            default: ''
        },
        options: {
            type: Object,
            dafault: function () {
                return {}
            }
        }
    },
    mounted () {
        this.inteMap()
    },
     methods: {
        inteMap() {
            if(this.cid && this.options.center) {
                var map = new this.$BMap.Map(this.cid)
                map.centerAndZoom(this.options.center, this.options.zoom)
                map.enableScrollWheelZoom(true)
                map.setMapStyle({style:'bluish'})
            }
        }
    }
}
</script>

<style>
    .map-wrapper{
        width: 60%;
        height: 100%;
        float: left;
    }
    .map{
        width: 100%;
        height: 100%;
    }
</style>
